<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>事件处理器</title>
        <!--第一步：安装Vue.js-->
        <script src="./vue.js"></script>
    </head>
    <body>
        <!--第三步：创建HTML模板（根组件）-->
       <div id="app">
       <div>
          <p class = "note">1、内联事件处理器</p>
          <button @click="count++">Count is:{{count}}</button>
       </div>
       <div>
        <p class = "note">2、方法事件处理器：监听事件属性值中直接写方法名</p>
        <button @click="incr">Count is:{{count}}</button>
     </div>
     <div>
     <p class = "note">3、内联事件处理器传递参数</p>
        <button @click="incr(1)">Count is:{{count}}</button>
     </div>
     <div>
     <p class = "note">4、内联事件处理器传递参数的同时,访问原生的DOM事件对象：</p>
        <button @click="warn(1,$event)">@click="warn(1,$event)</button>
     </div>
     <!--5、事件修饰符-->
     <div @click="divClick('A')">
        A <div @click.stop="divClick('B')">B stop修饰符，阻止事件传播（事件冒泡）</div>
     </div>
     <div @click.self="divClick('A')">
        A <div @click="divClick('B')">B self修饰符:只有event.target是自己本身的时候才会被监听触发</div>
     </div>
     <div @click.once="divClick('once')">
        once-修饰符
     </div>
     <div>
        <a href="https://www.nxu.edu.cn" @click.prevent="divClick('nxu')">宁夏大学</a>
        prevent修饰符:阻止默认事件，例如a标签，提交按钮的submit事件
    </div>
    <div @click.capture="divClick('A')">
        capture修饰符:A外<div @click.capture="divClick('B')">B内<div @click="divClick('C')">从孙子节点</div></div>
    </div>
       </div>

    </body>
    <script>
        //Vue.createApp({/*根组件选项});
        //选项式API
        //第二步：创建Vue的应用实例
        const app = Vue.createApp({
           data(){//定义所需的状态变量
              return{
                  count:0,//等价于const count = ref(0);
              }
           },
           methods:{
            incr(e){//原生的DOM事件
                console.log('2、方法事件处理器',e);
                this.count++;
            },
            warn(a,b){
                console.log(a,b);
                //访问原生DOM事件对象
            },
            divClick(param){
                console.log('divClick....'+param);
            }
           }
        });
      //第四步：在根元素上挂载应用实例，返回根组件实例对象
      const vm = app.mount("#app");//const app = Vue.createApp({}).mount("#app");
    </script>
</html>